// var
@imagecompare-prefix-cls         : x-image-compare;
@imagecompare-font-color         : #cecece;
@imagecompare-font-size          : 14px;
@imagecompare-toolbar-bg         : rgba(57,57,57,.6);
@imagecompare-brown-color        : #d0ba94;

// mixins

// styles - default
.@{imagecompare-prefix-cls} {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  canvas {
    .absolute-fullscreen;
    width: 100%;
    height: 100%;
    transition: opacity .3s ease;
  }
  &__demo,
  &__demobin { opacity: .3; }
  &__toolsbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: @imagecompare-font-size * 2.5;
    border-top: 2px solid @imagecompare-brown-color;
    background-color: @imagecompare-toolbar-bg;
    display: flex;
    &_item {
      width: 0;
      flex-grow: 1;
      position: relative;
      & + .@{imagecompare-prefix-cls}__toolsbar_item::before {
        content: "";
        position: absolute;
        left: 0;
        top: @imagecompare-font-size * 0.5;
        width: 2px;
        height: @imagecompare-font-size * 1.5;
        background-color: tint(@imagecompare-toolbar-bg, 35%);
      }
    }
    &_btn {
      width: @imagecompare-font-size * 2.5;
      height: @imagecompare-font-size * 2.5;
      margin: auto;
      .flex-center;
      cursor: pointer;
      .xvu-iconfont {
        font-size: @imagecompare-font-size * 1.75;
        font-weight: 500;
        color: @imagecompare-font-color;
      }
      &:hover, &:active, &:focus {
        .xvu-iconfont {color: #fff;}
      }
    }
  }
}

// styles - more
